<template>
  <!-- 查询选择 -->
  <div class="searchfield-config">
    <je-form-item label="可选可输入" name="optionalAndInput">
      <je-switch v-model:value="formState.optionalAndInput" mode="checkbox" />
      <span class="prompt">启动后可以通过选择写入也可以直接写入。</span>
    </je-form-item>
    <je-form-item label="可穿透" name="penetrate">
      <je-switch v-model:value="formState.penetrate" mode="checkbox" />
      <span class="prompt">可以穿透到表单(注意配置唯一性字段)。</span>
    </je-form-item>
    <je-form-item label="回显过滤字段" name="pkName">
      <je-select v-model:value="formState.pkName" :options="pkNameOptions"></je-select>
    </je-form-item>
    <je-form-item label="展示字段" name="showField">
      <je-grid-select
        v-model:value="formState.showField"
        name="showField"
        config-info="JE_CORE_RESOURCECOLUMN,showField,RESOURCECOLUMN_CODE,M"
        :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
        :querys="[
          {
            code: 'RESOURCECOLUMN_FUNCINFO_ID',
            value: funcId,
            type: '=',
            cn: 'and',
          },
        ]"
      />
    </je-form-item>
    <je-form-item label="查询字段" name="queryField">
      <je-grid-select
        v-model:value="formState.queryField"
        name="queryField"
        config-info="JE_CORE_RESOURCECOLUMN,queryField,RESOURCECOLUMN_CODE,M"
        :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
        :querys="[
          {
            code: 'RESOURCECOLUMN_FUNCINFO_ID',
            value: funcId,
            type: '=',
            cn: 'and',
          },
        ]"
      />
    </je-form-item>
  </div>
</template>
<script>
  import { defineComponent, reactive, watch, ref } from 'vue';
  import { Form, Switch, InputSelect, Select } from '@jecloud/ui';
  import { decode, isNotEmpty } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';
  import { getData } from '@/api/index';

  export default defineComponent({
    name: 'SearchfieldConfig',
    components: {
      JeFormItem: Form.Item,
      JeSwitch: Switch,
      JeSelect: Select,
      JeGridSelect: InputSelect.Grid,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
      configInfo: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        optionalAndInput: config.optionalAndInput, //可选可输入
        penetrate: config.penetrate, //可穿透
        pkName: config.pkName || '', //回显过滤字段
        showField: config.showField || '', //展示字段
        queryField: config.queryField || '', //查询字段
      });

      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );

      //查询功能Id
      const funcId = ref('');
      const getFuncId = (funcCode) => {
        //查询功能Id
        const params = {
          tableCode: 'JE_CORE_FUNCINFO',
          limit: -1,
          j_query: JSON.stringify({
            custom: [
              {
                code: 'FUNCINFO_FUNCCODE',
                value: funcCode,
                type: '=',
                cn: 'and',
              },
            ],
          }),
        };

        getData(params).then((res) => {
          funcId.value = res[0].JE_CORE_FUNCINFO_ID;
        });
      };

      //下拉框数据
      const pkNameOptions = ref([]);
      //根据configInfo的数据更新下拉框的数据
      const setOtherConfig = (configInfo) => {
        if (isNotEmpty(configInfo)) {
          const configData = configInfo.split(',');

          if (isNotEmpty(configData[2])) {
            const nodeCodes = configData[2].split('~');
            if (nodeCodes.length > 0) {
              const nodeFieldArray = [];
              //数据去重
              const newCodes = [...new Set(nodeCodes)];
              newCodes.forEach((code) => {
                nodeFieldArray.push({ value: code, label: code });
              });
              if (nodeFieldArray.length > 0) {
                pkNameOptions.value = nodeFieldArray;
              }
            }
          }
          if (isNotEmpty(configData[0])) {
            getFuncId(configData[0]);
          }
        }
      };

      watch(
        () => props.configInfo,
        () => {
          setOtherConfig(props.configInfo);
        },
        { deep: true.valueOf, immediate: true },
      );

      //暴露表单值用于父组件赋值
      expose({
        formState,
        setOtherConfig,
      });

      return { formState, pkNameOptions, funcId };
    },
  });
</script>
<style lang="less" scoped></style>
